<template>
    <div>
        <ChildrenView :title="title" :num="orderUser">
            <template #there>
                <div id="there"></div>
            </template>
            <p class="p"></p>

            <template>
                <div><span>退货率</span><span>{{ returnRate }}</span></div>
            </template>
        </ChildrenView>
    </div>
</template>

<script>
import ChildrenView from './ChildrenView.vue';
import getData from '@/mixin/mixin'
export default {
    components: { ChildrenView },
    mixins: [getData],
    data() {
        return {
            title: '今日交易用户数',
        }
    },
    computed: {
        reportDate() {
            return this.getReportDate()
        }
    },
    watch: {
        orderUserTrend(){
            return this.gets()
        }
        
    },
    methods: {
        gets() {
            var myChart = this.$echarts.init(document.getElementById('there'));
            let options = {
                yAxis: {
                    show: false
                },
                xAxis: {
                    show: false,
                    type: 'category'
                },
                grid: {
                    right: 0,
                    bottom: 0,
                    left: 0,
                    top: 0
                },
                series: [
                    {
                        type: 'bar',
                        data: this.orderUserTrend,
                        smooth: true,
                        showSymbol: false,
                        color: 'blue',
                        lineStyle: {
                            width: 0
                        },
                        barWidth: 20,
                        stack: 'Total'
                    }

                ],
                tooltip: {
          formatter: (params) => {
            return "销量" + params.data;
          },
        },
            }
            myChart.setOption(options)
        }
    },
    mounted() {

    }
}
</script>

<style lang="scss">
#there {
    width: 100%;
    height: 100%;
}
</style>